<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 需求点击哪项,该项变红色 -->
<!-- 思路 -->
			<!-- 1.我想要的item样式 -->

		<!-- 	<ul>
				<li class="active">
					{{index+1}}-{{item}}
				</li>
				<li class="">
					{{index+1}}-{{item}}
				</li>
				<li class="">
					{{index+1}}-{{item}}
				</li>
			</ul>

 -->
			
			<!-- 2.改变样式 -->
			<!-- 
			<ul>
				<li v-for="(item,index) in movies" :class="{active:条件}">
					{{index+1}}-{{item}}
				</li>
			</ul> -->
			<!-- 因为不能用一个变量去代替，不然每个li的值都一样，所以需要条件 -->
			<!-- <ul>
				<li v-for="(item,index) in movies" :class="{active:currentIndex==index}">
					{{index+1}}-{{item}}
				</li>
			</ul> -->
			
			<!-- 3.改变状态 -->
			<!-- 状态需要用函数来改变,之前有是用值代表状态,那么就需要改变记录状态的值,记录状态的值改变到最终状态 -->
			<!-- methods:{
				liClick : function(index){
					// 改变状态
					this.currentIndex = index;
				}
			} -->

			<ul>
				<li v-for="(item,index) in movies" :class="{active:currentIndex==index}" @click="liClick(index)">
					{{index+1}}-{{item}}
				</li>
			</ul>
		</div>
	</body>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript"> 
		const app = new Vue({
			el: "#app",
			data: {
				currentIndex: 0,
				movies : [
					'海王',
					'海尔兄弟',
					'火影忍者',
					'海贼王'
				]
			},
			methods:{
				liClick : function(index){
					// 改变状态
					this.currentIndex = index;
				}
			}
		})
	</script>
</html>
